<template lang="pug">
    .container
      .swiper
        swiper(
            autoplay,
            indicators-dts,
            circular,
            interval,
            :interval="interval",
            :duration="duration"
        )
          block(v-for="(item,index) in initSwiperList", :key="index")
            swiper-item
              image.slide-image(
                  :src="item.imageMobile",
                  width="355"
                  height="150"
              )
      //- 横向列表
      .meueList
        .meueListWrap
          .item(
            v-for="(x,index) in arrList",
            :key="index"
            @click="toList(x.url)"
            )
            image(:src="x.src")
            span {{ x.name }}
      //- 横向商品
      .initHorizontalList
        .section__title.module-title
          span {{ initHorizontalList.recommendTitle }}
          span {{ initHorizontalList.recommendDesc }}
        scroll-view.scroll-view_H(scroll-x="true")
          .item(
            v-for="(x,index) in initHorizontalList.recommendDetailList"
            :key="index"
            @click="toDetail(x.refId)")
            .pic-img
              image(:src="x.imageMobile")
            .goods-info
              .goods-title {{ x.goods.goodsName }}
              .goods-descripition {{ x.descripition }}
              .goods-price ¥{{ x.goods.presentPrice }}
      //- 纵向商品
      .initVerticalList
        .item(v-for="(x,index) in initVerticalList" :key="index")
          .module
            .module-title
              span  {{ x.recommendTitle }}
              span {{ x.recommendDesc }}
            .module-more(@click="toList(x.moreUrl)")
              span 更多
              i.icon.iconfont.icon-youjiantou1
          .item-wrap
            a.goods(
              v-for="(item, i) in x.recommendDetailList"
              :key="i"
              @click="toDetail(item.refId)"
            )
              .pic-img
                image(:src="item.imageMobile")
              .goods-info
                .goods-title {{ item.goods.goodsName }}
                .goods-descripition {{ item.descripition }}
                .goods-price ¥{{ item.goods.presentPrice }}
      //- 授权
      .authorize(v-show="makesure")
        .wrap
          i.icon.iconfont.icon-xuanzhong
          span 为了更好的体验，请允许应用获取您的昵称、头像等基本信息授权
          button(type="primary" open-type="getUserInfo" @getuserinfo="bind_GetUserInfo") 确认授权
</template>
<script>
import api from "@/api";
import { getArgs } from "@/utils/"
export default {
  data() {
    return {
      makesure: true,
      autoplay: true,
      circular: "true",
      interval: 3000,
      duration: 1000,
      initSwiperList: [],
      //横向商品列表
      initHorizontalList: {
        recommendDesc: "",
        recommendTitle: "",
        recommendDetailList: []
      },
      toView: "red",
      scrollTop: 100,
      //纵向商品列表
      initVerticalList: [],
      // 商品全部信息
      arrList: [
        {
          name: "男士专用",
          src:
            "https://file.h7go.com/file/resources/upload/image/menuTab/icon-1.jpg",
          url: "../mall/goodslist.html?categoryId=22"
        },
        {
          name: "女生专用",
          src:
            "https://file.h7go.com/file/resources/upload/image/menuTab/icon-2.jpg",
          url: "../mall/goodslist.html?categoryId=23"
        },
        {
          name: "厨房家具",
          src:
            "https://file.h7go.com/file/resources/upload/image/menuTab/icon-3.jpg",
          url: "../mall/goodslist.html?categoryId=161114030147000039"
        },
        {
          name: "口腔护理",
          src:
            "https://file.h7go.com/file/resources/upload/image/menuTab/icon-4.jpg",
          url: "../mall/goodslist.html?categoryId=24"
        },
        {
          name: "影音电器",
          src:
            "https://file.h7go.com/file/resources/upload/image/menuTab/icon-5.jpg",
          url: "../mall/goodslist.html?categoryId=170228160333000006"
        }
      ],
      indicatorDots: true
    };
  },
  created() {
  },
  async onPullDownRefresh() {
    await wx.showLoading({
      title: "加载中"
    });
    await this.getIndexGoods();
    await wx.stopPullDownRefresh();
  },
  mounted() {
    this.getIndexGoods();
    wx.getSetting({
      success: res => {
        console.log(res)
        if (res.authSetting["scope.userInfo"]) {
          this.makesure = false
        }
      }
    })
  },
  methods: {
    async getIndexGoods() {
      wx.showLoading({ title: "加载中" });
      await api.getIndexGoods().then(data => {
        console.log(data);
        data.result.forEach(v => {
          switch (v.displayType) {
            case "001":
              this.initSwiperList = v.recommendDetailList;
              break;
            case "002":
              this.initHorizontalList = v;
              break;
            case "003":
              this.initVerticalList.push(v);
              break;
            default:
              break;
          }
        });
      });
      await setTimeout(() => {
        wx.hideLoading();
      }, 1000);
    },
    toList (x) {
      console.log(x)
    },
    toDetail (x) {
      var url = `/pages/mall/detail/main?goodsId=${x}`
      wx.navigateTo({url})
    },
    bind_GetUserInfo (x) {
      this.makesure = false
      console.log(x)
    }
  }
};
</script>
<style lang="scss">
.header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 10px 15px;
  padding: 8px;
  background: #fff;
  border-radius: 5px;
  font-size: 15px;
  color: #b9b9b9;
  span {
    margin-right: 5px;
  }
}
.swiper {
  width: 100%;
  height: 100%;
}
swiper {
  border-bottom: 1px solid #e4e4e4;
  image {
    height: 100%;
    width: 100%;
  }
}
.initHorizontalList {
  margin-top: 10px;
  padding-bottom: 10px;
  background: #fff;
  border-bottom: 1px solid #f4f8f7;
  width: 100%;
  .module-title {
    padding: 10px 16px;
    border-bottom: 1px solid #f4f8f7;
    span:first-of-type {
      font-weight: 600;
      font-size: 15px;
      margin-right: 10px;
    }
  }
  .scroll-view_H {
    background: #fff;
    box-sizing: border-box;
    white-space: nowrap;
    font-size: 14px;
    .item:last-of-type {
      border-right: none;
    }
    .item {
      background: #fff;
      width: 36%;
      display: inline-block;
      border-right: 1px solid #f4f8f7;
      .goods-title {
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        text-align: center;
        padding: 0 2px;
      }
      .goods-description {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #828282;
        font-size: 12px;
      }
      .goods-price {
        color: #ec554e;
        margin-top: 5px;
        padding: 0 2px;
      }
      .pic-img {
        position: relative;
        height: 0;
        line-height: 0;
        font-size: 0;
        width: 100%;
        padding-top: 100%;
        image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          padding: 10%;
          box-sizing: border-box;
        }
      }
    }
  }
}
.initVerticalList .item {
  display: flex;
  flex-direction: column;
  .module {
    margin-top: 10px;
    padding: 10px 16px;
    background: #fff;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #f4f8f7;
    .module-title {
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      span:first-of-type {
        font-weight: 600;
        font-size: 15px;
        margin-right: 10px;
      }
    }
    .module-more {
      display: flex;
    }
  }
  .item-wrap {
    display: flex;
    flex-wrap: wrap;
    background: #fff;
    .goods {
      border-bottom: 1px solid #f4f8f7;
      width: 50%;
      box-sizing: border-box;
      background: #fff;
      font-size: 14px;
      border-right: 1px solid #f4f8f7;
      .goods-info {
        padding: 0 15px;
        .goods-title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
        .goods-description {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #828282;
          font-size: 12px;
        }
        .goods-price {
          color: #ec554e;
          margin-top: 5px;
        }
      }
      .pic-img {
        position: relative;
        height: 0;
        line-height: 0;
        font-size: 0;
        width: 100%;
        padding-top: 100%;
        image {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          padding: 10%;
          box-sizing: border-box;
        }
      }
    }
  }
}

.meueList {
  width: 100%;
}
.meueList .meueListWrap {
  width: 100%;
  display: flex;
  justify-content: space-around;
  background: #fff;
  margin-top: 10px;
  padding: 10px 0;
  .item {
    display: flex;
    flex: 1;
    color: #606060;
    align-items: center;
    flex-direction: column;
    image {
      width: 50px;
      height: 50px;
    }
  }
}
.authorize {
  position: fixed;
  height: 100%;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  text-align: center;
  font-size: 15px;
  color: #898989;
  z-index: 999;
  box-sizing: border-box;
  line-height: 30px;
  .wrap {
    padding: 30px 20px;
    background: #fff;
    border-radius: 10px;
    margin: 0 20px;
    margin-top: 30%;
    i {
      color: #1aad19;
      font-size: 60px;
      margin-bottom: 20px;
    }
    button {
      font-size: 15px;
      width: 70%;
      margin-top: 20px;
    }
  }
}
</style>
